<!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>Gesture Detector | Onsen UI</title>
  <link rel="stylesheet" href="../styles/app.css"/>
  <link rel="stylesheet" href="../../../../build/css/onsenui.css">
  <link rel="stylesheet" href="../../../../build/css/onsen-css-components.css">

  <script src="../../../../build/js/onsenui.js"></script>
  <script src="../../node_modules/angular/angular.js"></script>
  <script src="../../dist/angularjs-onsenui.js"></script>
  <script src="../app.js"></script>

  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

  <script>
    var eventName =
      'drag dragleft dragright dragup dragdown hold release swipe swipeleft swiperight ' +
      'swipeup swipedown tap doubletap touch transform pinch pinchin pinchout rotate';

    $(document).on(eventName, '#hoge', function(event) {
      if (event.type !== 'release') {
        $(this).text(event.type);
      }
    });
  </script>

</head>

<body>

  <ons-page>
    <ons-toolbar>
      <div class="center">Gesture Detector</div>
    </ons-toolbar>

    <ons-gesture-detector style="height: 300px; margin: 50px 50px;">
      <div id="hoge" style="border: 1px solid #ccc; background-color: #f9f9f9; width: 100%; height: 300px; line-height: 300px; text-align: center; color: #999;">
        ...
      </div>
    </ons-gesture-detector>

    <p style="margin: 0 50px; color: #ccc;">Supporting events: Drag, Hold, Release, Swipe, Tap, DoubleTap, Transform, Pinch, Rotate</p>
  </ons-page>

</body>
</html>
